{% extends 'base.html' %}

{% block title %}批量打印标签{% endblock %}

{% block extra_css %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/label-ui.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'assets:index' %}">首页</a></li>
            <li class="breadcrumb-item"><a href="{% url 'assets:asset_list' %}">资产管理</a></li>
            <li class="breadcrumb-item active">批量打印标签</li>
        </ol>
    </nav>

    <div class="row">
        <!-- 筛选和搜索 -->
        <div class="col-md-3">
            <div class="filter-card">
                <h5 class="mb-4">
                    <i class="fas fa-filter text-primary me-2"></i>
                    筛选条件
                </h5>
                
                <form method="get" id="filter-form">
                    <!-- 搜索框 -->
                    <div class="mb-3">
                        <label class="form-label">搜索资产：</label>
                        <div class="search-container">
                            <i class="fas fa-search"></i>
                            <input type="text" class="form-control" name="search" 
                                   value="{{ request.GET.search }}" placeholder="资产名称或编号">
                        </div>
                    </div>
                    
                    <!-- 资产类别 -->
                    <div class="mb-3">
                        <label class="form-label">资产类别：</label>
                        <select class="form-select" name="category">
                            <option value="">全部类别</option>
                            {% for category in categories %}
                                <option value="{{ category.id }}" 
                                        {% if request.GET.category == category.id|stringformat:"s" %}selected{% endif %}>
                                    {{ category.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- 所属部门 -->
                    <div class="mb-3">
                        <label class="form-label">所属部门：</label>
                        <select class="form-select" name="department">
                            <option value="">全部部门</option>
                            {% for department in departments %}
                                <option value="{{ department.id }}" 
                                        {% if request.GET.department == department.id|stringformat:"s" %}selected{% endif %}>
                                    {{ department.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <!-- 资产状态 -->
                    <div class="mb-3">
                        <label class="form-label">资产状态：</label>
                        <select class="form-select" name="status">
                            <option value="">全部状态</option>
                            <option value="idle" {% if request.GET.status == 'idle' %}selected{% endif %}>闲置</option>
                            <option value="in_use" {% if request.GET.status == 'in_use' %}selected{% endif %}>在用</option>
                            <option value="borrowed" {% if request.GET.status == 'borrowed' %}selected{% endif %}>已借出</option>
                            <option value="maintenance" {% if request.GET.status == 'maintenance' %}selected{% endif %}>维修中</option>
                        </select>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-custom">
                            <i class="fas fa-search me-2"></i>筛选
                        </button>
                        <a href="{% url 'assets:asset_batch_print_labels' %}" class="btn btn-outline-secondary btn-custom">
                            <i class="fas fa-refresh me-2"></i>重置
                        </a>
                    </div>
                </form>
            </div>
            
            <!-- 打印选项 -->
            <div class="print-options-card">
                <h5 class="mb-4">
                    <i class="fas fa-cog me-2"></i>
                    打印选项
                </h5>
                
                <form method="post" id="print-form">
                    {% csrf_token %}
                    <input type="hidden" name="selected_assets" id="selected-assets-input">
                    
                    <div class="mb-3">
                        <label class="form-label">标签尺寸：</label>
                        <select class="form-select" name="label_size">
                            <option value="small">小标签 (40x20mm)</option>
                            <option value="medium" selected>中标签 (60x30mm)</option>
                            <option value="large">大标签 (80x40mm)</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">每页标签数：</label>
                        <select class="form-select" name="labels_per_page">
                            <option value="6">6个/页</option>
                            <option value="12" selected>12个/页</option>
                            <option value="24">24个/页</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="include_qr" id="include-qr" checked>
                            <label class="form-check-label" for="include-qr">
                                包含二维码
                            </label>
                        </div>
                    </div>
                    
                    <div class="selection-summary">
                        <strong>已选择：<span id="selected-count">0</span> 个资产</strong>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-light btn-custom" id="print-btn" disabled>
                            <i class="fas fa-print me-2"></i>快速打印
                        </button>
                        <button type="button" class="btn btn-outline-light btn-custom" id="config-print-btn" disabled>
                            <i class="fas fa-cog me-2"></i>配置打印
                        </button>
                        <button type="button" class="btn btn-outline-light btn-custom" id="select-all-btn">
                            <i class="fas fa-check-double me-2"></i>全选
                        </button>
                        <button type="button" class="btn btn-outline-light btn-custom" id="clear-selection-btn">
                            <i class="fas fa-times me-2"></i>清空选择
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 资产列表 -->
        <div class="col-md-9">
            <div class="asset-selection-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="mb-0">
                        <i class="fas fa-list text-primary me-2"></i>
                        选择要打印标签的资产
                    </h5>
                    <span class="badge bg-info">共 {{ assets.count }} 个资产</span>
                </div>
                
                {% if assets %}
                    <div id="asset-list">
                        {% for asset in assets %}
                            <div class="asset-item" data-asset-id="{{ asset.id }}">
                                <div class="asset-info">
                                    <div class="asset-details">
                                        <h6>{{ asset.name }}</h6>
                                        <div class="asset-meta">
                                            <span class="me-3">
                                                <i class="fas fa-barcode me-1"></i>
                                                {{ asset.asset_number }}
                                            </span>
                                            <span class="me-3">
                                                <i class="fas fa-tags me-1"></i>
                                                {{ asset.category.name|default:"未分类" }}
                                            </span>
                                            <span>
                                                <i class="fas fa-building me-1"></i>
                                                {{ asset.department.name|default:"未分配" }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="asset-status">
                                        {% if asset.status == 'idle' %}
                                            <span class="badge bg-secondary">闲置</span>
                                        {% elif asset.status == 'in_use' %}
                                            <span class="badge bg-success">在用</span>
                                        {% elif asset.status == 'borrowed' %}
                                            <span class="badge bg-warning">已借出</span>
                                        {% elif asset.status == 'maintenance' %}
                                            <span class="badge bg-info">维修中</span>
                                        {% elif asset.status == 'scrapped' %}
                                            <span class="badge bg-danger">已报废</span>
                                        {% endif %}
                                        
                                        <div class="mt-2">
                                            <small class="text-muted">
                                                ¥{{ asset.purchase_price|floatformat:2 }}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                    
                    <!-- 分页 -->
                    {% if is_paginated %}
                        <div class="pagination-container">
                            <nav aria-label="资产分页">
                                <ul class="pagination">
                                    {% if page_obj.has_previous %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page=1{{ request.GET.urlencode|slice:'1:' }}">首页</a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{{ request.GET.urlencode|slice:'1:' }}">上一页</a>
                                        </li>
                                    {% endif %}
                                    
                                    <li class="page-item active">
                                        <span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span>
                                    </li>
                                    
                                    {% if page_obj.has_next %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_obj.next_page_number }}{{ request.GET.urlencode|slice:'1:' }}">下一页</a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{{ request.GET.urlencode|slice:'1:' }}">末页</a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                    {% endif %}
                {% else %}
                    <div class="text-center py-5">
                        <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">没有找到符合条件的资产</h5>
                        <p class="text-muted">请尝试调整筛选条件</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const assetItems = document.querySelectorAll('.asset-item');
    const selectedAssetsInput = document.getElementById('selected-assets-input');
    const selectedCountSpan = document.getElementById('selected-count');
    const printBtn = document.getElementById('print-btn');
    const selectAllBtn = document.getElementById('select-all-btn');
    const clearSelectionBtn = document.getElementById('clear-selection-btn');
    
    let selectedAssets = new Set();
    
    // 资产项点击事件
    assetItems.forEach(item => {
        item.addEventListener('click', function() {
            const assetId = this.dataset.assetId;
            
            if (selectedAssets.has(assetId)) {
                selectedAssets.delete(assetId);
                this.classList.remove('selected');
            } else {
                selectedAssets.add(assetId);
                this.classList.add('selected');
            }
            
            updateSelection();
        });
    });
    
    // 全选按钮
    selectAllBtn.addEventListener('click', function() {
        assetItems.forEach(item => {
            const assetId = item.dataset.assetId;
            selectedAssets.add(assetId);
            item.classList.add('selected');
        });
        updateSelection();
    });
    
    // 清空选择按钮
    clearSelectionBtn.addEventListener('click', function() {
        selectedAssets.clear();
        assetItems.forEach(item => {
            item.classList.remove('selected');
        });
        updateSelection();
    });
    
    // 更新选择状态
    function updateSelection() {
        selectedCountSpan.textContent = selectedAssets.size;
        selectedAssetsInput.value = Array.from(selectedAssets).join(',');
        
        const configPrintBtn = document.getElementById('config-print-btn');
        
        if (selectedAssets.size > 0) {
            printBtn.disabled = false;
            printBtn.classList.remove('btn-outline-light');
            printBtn.classList.add('btn-light');
            
            configPrintBtn.disabled = false;
            configPrintBtn.classList.remove('btn-outline-light');
            configPrintBtn.classList.add('btn-outline-light');
        } else {
            printBtn.disabled = true;
            printBtn.classList.remove('btn-light');
            printBtn.classList.add('btn-outline-light');
            
            configPrintBtn.disabled = true;
            configPrintBtn.classList.remove('btn-outline-light');
            configPrintBtn.classList.add('btn-outline-light');
        }
    }
    
    // 表单提交前验证
    document.getElementById('print-form').addEventListener('submit', function(e) {
        if (selectedAssets.size === 0) {
            e.preventDefault();
            alert('请至少选择一个资产进行打印！');
        }
    });
    
    // 筛选表单自动提交
    const filterInputs = document.querySelectorAll('#filter-form input, #filter-form select');
    filterInputs.forEach(input => {
        if (input.type === 'text') {
            // 文本输入框延迟提交
            let timeout;
            input.addEventListener('input', function() {
                clearTimeout(timeout);
                timeout = setTimeout(() => {
                    document.getElementById('filter-form').submit();
                }, 500);
            });
        } else {
            // 选择框立即提交
            input.addEventListener('change', function() {
                document.getElementById('filter-form').submit();
            });
        }
    });
    
    // 配置打印按钮
    document.getElementById('config-print-btn').addEventListener('click', function() {
        if (selectedAssets.size === 0) {
            alert('请至少选择一个资产进行打印！');
            return;
        }
        
        const assetIds = Array.from(selectedAssets).join(',');
        const url = "{% url 'assets:asset_batch_print_labels_config' %}?asset_ids=" + assetIds;
        window.location.href = url;
    });
    
    // 初始化
    updateSelection();
});
</script>
{% endblock %}
